Fade the Star

Now for the final phase of the basic animations; you’re going to fade the star out to be completely transparent, and then back to fully opaque.

Note: Fading items can be a very useful way to transition them into or out of a UI. For example, when removing an item from a list, you might fade out the contents first, before closing the gap that it leaves. Or if new information appears in a UI, you might fade it in. This effect not only avoids discontinuous motion, with UI elements snapping in and out in front of the user, but it helps alert the user that there is a change happening, instead of just removing or adding items and making them guess what just happened.

Fading is done using the ALPHA property on View.

Note: “alpha” is a term generally used, especially in computer graphics, to denote the amount of opacity in an object. A value of 0 indicates that the object is completely transparent, and a value of 1 indicates that the object is completely opaque. View objects have a default value of 1. Animations that fade views in or out animate the alpha value between 0 and 1.

1. Define the fader() function to fade out the view to 0 and then back to its starting value. This code is essentially equivalent to the translater() function code you wrote before, except with a different property and end value. Here’s what the function looks like when it’s complete:

private fun fader() {
    val animator = ObjectAnimator.ofFloat(star, View.ALPHA, 0f)
    animator.repeatCount = 1
    animator.repeatMode = ObjectAnimator.REVERSE
    animator.disableViewDuringAnimation(fade)
    animator.start()
}